<template>
	<view>
		<view class="list">
			<block v-for="item in list" :key="item.id">
				<view class="item" @click="onDetail(item.id)">
					<view class="title">{{item.title}}</view>
					<view class="info text-cut">{{item.intro}}</view>
					<view class="image">
						<image mode="aspectFill" :src="item.cover"></image>
					</view>
				</view>
			</block>
			<!--正在加载 start-->
			<v-loadmore :visible="load"></v-loadmore>
			<!--正在加载 end-->
			
			<!--没有更多了 start-->
			<v-nomore :visible="!load && isMore"></v-nomore>
			
			<loading v-if="loading"></loading>
		</view>
	</view>
</template>

<script>
	import vNomore from "@/components/load/nomore.vue"
	import vLoadmore from "@/components/load/loadmore.vue"
	import ColumnModule from "@/Api/Column.js"
	export default {
		components: {
			vNomore,
			vLoadmore
		},
		data() {
			return {
				loading: true,
				load: true,
				isMore: false,
				current_page: 0,
				list: []
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(!this.isMore) {
				this.getList()
			}
		},
		methods: {
			getList() {
				let { current_page, list } = this
				ColumnModule.getStrategyList(current_page)
					.then((res)=> {
						if (current_page == 0) list = []
						 let onMore = false
						 let len = res.data.length
						 len > 0 ? res.data.forEach(item =>  list.push(item)) :  onMore = true
						this.list = list
						this.load = false
						this.current_page = res.current_page
						this.isMore = len < res.per_page ? true: false
						this.onMore = onMore
						this.loading = false
					})
			},
			onDetail(id) {
				uni.navigateTo({
					url: `/pages/Column/Strategy/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.list{
		padding: 30rpx;
		.item{
			background: #FFFFFF;
			box-shadow: 0 10rpx 50rpx 0 rgba(0,0,0,0.10);
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			.title{
				font-size: 30rpx;
				color: #000000;
				font-weight: bold;
				line-height: 42rpx;
				margin-bottom: 10rpx;
			}
			.info{
				font-size: 22rpx;
				color: #999999;
				line-height: 22rpx;
				margin-bottom: 20rpx;
			}
			.image{
				width: 100%;
				height: 340rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
